<template>
  <div v-loading="loading">
    <div class="card">
      <div class="card-body">
        <div class="report-title">开票信息</div>
        <div class="row">
          <div class="col-sm-4">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">发票抬头：</div>
              <div class="dl-dd">{{ infoData.enterprise_name }}</div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">纳税识别号：</div>
              <div class="dl-dd">{{ infoData.enterprise_code }}</div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">联系电话：</div>
              <div class="dl-dd">{{ infoData.agent_phone }}</div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-4">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">发票类型：</div>
              <div class="dl-dd">普通发票</div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">发票内容：</div>
              <div class="dl-dd">服务费</div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">发票金额：</div>
              <div class="dl-dd">{{ infoData.gua_fee }} 元</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card mt-3">
      <div class="card-body">
        <div class="report-title">订单信息</div>
        <div class="row">
          <div class="col-sm-4">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">申请人：</div>
              <div class="dl-dd">{{ infoData.enterprise_name }}</div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">申请时间：</div>
              <div class="dl-dd">{{ infoData.create_time }}</div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">保函类型：</div>
              <div class="dl-dd">投标保函</div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">担保金额：</div>
              <div class="dl-dd">{{ infoData.tender_bond }} 元</div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">担保费率：</div>
              <div class="dl-dd">{{ infoData.gua_rate }} ‰</div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">担保费金额：</div>
              <div class="dl-dd">{{ infoData.gua_fee }} 元</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card mt-3">
      <div class="card-body">
        <div class="report-title">发票上传</div>
        <div class="d-flex">
          <div class="mx-1" style="width: 180px">客户邮箱：</div>
          <div class="flex-1">{{ infoData.agent_email || '无' }}</div>
        </div>
        <attach-main :related-id="queryId" :view-mode="viewMode"></attach-main>
      </div>
    </div>

    <div class="text-center mt-3" v-if="!viewMode">
      <el-button class="btn-long" type="primary" :loading="saveLoading" @click="handlePass">
        确认开票
      </el-button>
      <el-button class="btn-long" :disabled="saveLoading" @click="handleDismiss">取消</el-button>
    </div>
  </div>
</template>

<script>
import AttachMain from '@/bigcredit/views/letter/pay/invoice/AttachMain'
export default {
  components: {
    AttachMain,
  },
  props: {
    queryId: String,
    viewMode: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      loading: false,
      saveLoading: false,
      tableName: 'guarantee_project',
      infoData: {},
    }
  },
  computed: {},
  watch: {
    queryId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    handlePass() {
      this.$utils
        .msgbox({
          message: `确认开票?`,
          type: 'info',
          beforeClose: () =>
            this.$api.updateData(this.$serviceName, this.tableName, this.queryId, {
              invoice_status: 2,
              invoice_time: this.$utils.dateFormat(new Date()),
            }),
        })
        .then(() => {
          this.$message.success('操作成功！')
          this.$emit('success', false)
          this.handleDismiss()
        })
        .catch(() => this.$message.error(`操作失败，请重试！`))
    },
    handleDismiss() {
      this.$emit('close', false)
    },
    getData() {
      if (!this.queryId) {
        return
      }
      this.loading = true
      this.$api
        .getDataFromId(this.$serviceName, this.tableName, this.queryId)
        .then(res => {
          this.infoData = res?.data ?? {}
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.report-title {
  margin-bottom: 1rem;
  font-weight: bold;
  font-size: 1.2rem;
}
</style>
